<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/static/kindeditor/themes/default/default.css" />
		<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
		<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
		<script src="/bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <link rel="stylesheet" type="text/css" href="static/css/work/shangpin.css" />
		<script src="/static/js/work/shangpin.js" type="text/javascript" charset="UTF-8"></script> -->
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.div0-0 {
				width: 84px;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}

			#tj {
				display: none;
				position: fixed;
				top: 0px;
				left: 0px;
				width: 1920px;
				height: 910px;
				background: rgba(0, 0, 0, 0.3);
				color: #666;
			}

			#tj_1 {
				position: fixed;
				width: 732px;
				height: 882px;
				top: 23.5px;
				left: 750px;
				background: white;
			}

			#tj_1_1 {
				/*width: 100%;*/
				height: 50px;
				line-height: 50px;
				border: 0;
				background-color: #20222A;
				color: #fff;
				padding: 0 0px 0 20px;
			}

			#tj_1_2 {
				width: 420px;
				height: 700px;
				padding-left: 75px;
				padding-top: 24px;
			}

			#tjbtn {
				width: 64px;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
				margin-left: 130px;
			}

			.icon_false {
				display: inline-block;
				width: 14px;
				height: 2px;
				background: #fff;
				line-height: 0;
				font-size: 0;
				vertical-align: middle;
				-webkit-transform: rotate(45deg);
			}

			.icon_false:after {
				content: '/';
				display: block;
				width: 14px;
				height: 2px;
				background: #fff;
				-webkit-transform: rotate(-90deg);
			}


			/* #tab {
				border-width: 1px;
				border-style: solid;
				border-color: #e6e6e6;
				border-collapse: collapse;
				border-right: 1px solid #e6e6e6;
				border-bottom: 1px solid #e6e6e6;
				color: #666;
			}

			#tab th {
				text-align: left;
				width: 223px;
				height: 28px;
				line-height: 28px;
				padding: 5px 15px;
				font-weight: 400;
				background-color: #f2f2f2;
				border-left: 1px solid #e6e6e6;
				border-top: 1px solid #e6e6e6;
			}

			#tab td {
				width: 223px;
				text-align: left;
				padding: 10px;
				padding-left: 15px;
				border-left: 1px solid #e6e6e6;
				border-top: 1px solid #e6e6e6;
			}

			#tab tr:hover {
				background-color: #f2f2f2;
			} */
			tbody>tr:nth-child(1)>td:nth-child(1){
				width:87px;
			}
			.del {
				width: 42px;
				height: 24px;
				border: 0px solid black;
				border-radius: 3px;
				color: #fff;
				background-color: #FF5722;
				font-size: 12px;
				font-weight: 400;
				cursor: pointer;
			}

			.update {
				width: 42px;
				height: 24px;
				border: 0px solid black;
				border-radius: 3px;
				color: #fff;
				background-color: #1E9FFF;
				font-size: 12px;
				font-weight: 400;
				margin-left: 4px;
				cursor: pointer;
			}
			
			.img1{
				max-width: 272px !important;
				height: 60px;
			}
			.laytable-cell-1-0-2 {
			    width: 288px !important;
				height: 54px !important;
			}
			.layui-table-cell{
			    height: 54px;
			    line-height: 54px;
			}
			.laytable-cell-1-0-6 {
			    width: 257px !important;
				height: ;
			}
		</style>
	</head>
	<body>
		<div class="div0-0"><a href="/shangpinadd.html">添加</a></div>

		<!--添加-->
		<!-- <div id="tj">

			<div id="tj_1">
				<div id="tj_1_1">
					商品基本信息<div id="tj_1_1_1" style="display: inline-block; margin-left: 592px;cursor: pointer;"><i class="icon_false"></i></div>
				</div>
				<div id="tj_1_2">
					<div class="div1_1" style="margin-left: -14px;height: 38px;margin-bottom: 15px;">
						商品名称：<input id="name" type="text" class="input1" value="" placeholder="" style="margin-left: 17px;" />
					</div>
					<div class="div1_1" style="margin-left: 1px;height: 38px;margin-bottom: 15px;">
						价格：<input id="price" type="text" class="input1" value="" placeholder="" style="margin-left: 17px;" />
					</div>
					<div class="div1_1" style="height: 38px;margin-bottom: 15px;">所属品牌：
						<input id="brand" type="text" class="input1" value="" placeholder="" style="margin-left: 17px;" />
					</div>
					<div class="div1_1" style="height: 38px;margin-bottom: 15px;">所属分类：
						<input id="classify" type="text" class="input1" value="" placeholder="" style="margin-left: 17px;" />
					</div>
					<div class="div1_1" style="height: 38px;margin-bottom: 15px;">库存：
						<input id="inventory" type="text" class="input1" value="" placeholder="" style="margin-left: 17px;" />
					</div>
					<div class="div1_1" style="height: 38px;margin-bottom: 15px;">详情：
						<form action="" id="form" method="post">
							<textarea id="editor_id" name="content" style="width:700px;height:300px;">
									&lt;strong&gt;HTML内容&lt;/strong&gt;
							</textarea>
						</form>
					</div>
				</div>
				<div id="tj_1_3">
					<button id="tjbtn">确认</button>
				</div>
			</div>

		</div> -->

		<!-- <table id="tab">
			<th>商品名称</th>
			<th>商城价/元</th>
			<th>图片</th>
			<th>分类</th>
			<th>品牌</th>
			<th>库存</th>
			<th>详情</th>
			<th>操作</th>
		</table> -->

		<table id="tab" lay-filter="test"></table>
		<!--模板-->
		<script type="text/html" id="mod1">
			<button class="layui-btn layui-btn-warm" lay-event="remo">删除</button>
			<button class="layui-btn layui-btn-danger" lay-event="xiu">修改</button>
		</script>
		<div id="test1"></div>
		<script type="text/javascript">
			var userData; //表格数据
			layui.use(["table"], function() {
				table = layui.table;
				//表格渲染
				table.render({
					elem: "#tab", //指定渲染的容器
					id: "ttt",
					data: userData, //数据渲染-直接赋值数据
					page:true,
					cols: [
						[ //表头-每一行的模板
							{
								field: 'name',
								title: '商品名称'
							}, {
								field: 'price',
								title: '商城价/元'
							}, {
								field: 'lb',
								title: '图片',
								templet: '<div><img class="img1" src="/{{d.lb}}" ></div>'
							}, {
								field: 'classify',
								title: '分类'
							}, {
								field: 'brand',
								title: '品牌'
							}, {
								field: 'inventory',
								title: '库存'
							}, {
								field: 'particulars',
								title: '详情',
								style: "height:'80px'"
							}
							,{field: '', title: '操作', toolbar : "#mod1"}
						]
					]

				});
				//监听工具列事件
					table.on('tool(test)',function(obj){
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						 var data = obj.data; //获得当前行数据
						 var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
						if(layEvent=="remo"){	//点击了删除
							console.log(data.uid);
							$.ajax({
								type: "post",
								url: "/shangpindelete.php",
								data: {
									uid: data.uid
								},
								success: function(mgs) {
									obj.del();		//删除对应的行
								}
							});
						}else if(layEvent=="xiu"){
							console.log(data);
							sessionStorage.setItem("uid",data.uid);
							sessionStorage.setItem("name",data.name);
							sessionStorage.setItem("price",data.price );
							sessionStorage.setItem("lb",data.lb );
							sessionStorage.setItem("classify",data.classify);
							sessionStorage.setItem("brand",data.brand);
							sessionStorage.setItem("inventory",data.inventory);
							sessionStorage.setItem("particulars",data.particulars);
							$(window).attr('location','/shangpinupdate.html');
						}
					});
			});

			var editor;
			var arr = [
				'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
				'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
				'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
				'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
				'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
				'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
				'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
				'anchor', 'link', 'unlink', '|', 'about'
			];
			KindEditor.ready(function(K) {
				editor = K.create('#editor_id', {
					width: '100px', //设置编辑器的宽
					height: '400px',
					//items:['undo', 'redo']	只出现两个undo	后退redo	前进按钮
					items: arr, //设置工具栏的按钮
					uploadJson: '/ajax.php?ajax=upload', //文件上传程序
					fileManagerJson: '/ajax.php?ajax=file_manager', //浏览服务器图片空间
					allowFileManager: true, //启用图片空间按钮
				});
			});
			$(document).ready(function() {

				$("#ttjj").click(function() { //添加
					$("#tj").css("display", "block");
					//$("#tj").css("z-index", "19891022");
				});

				/* $("#tjbtn").click(function() {
					$("#tj").css("display", "none");
					$.ajax({
						type:'post',
						url:'/shangpinadd.php',
						data:{
							name:$('#name').val(),
							price:$('#price').val(),
							classify:$('#classify').val(),
							brand:$('#brand').val(),
							inventory:$('#inventory').val(),
							particulars:editor.html(),
						},
						dataType:'json',
						success:function(mgs){
							console.log(mgs);
						}
					});	
				}); */
				$("#tj_1_1_1").click(function() {
					$("#tj").css("display", "none");
				});

				$.ajax({
					type: 'get',
					url: '/shangpin.php',
					data: {
						page: 1
					},
					dataType: 'json',
					success: function(mgs) {
						userData = mgs.data;
						console.log(mgs.data);
						
					}
				});
				/*  */


			});
		</script>
	</body>
</html>
